## -*- coding: utf-8 -*-
<%inherit file="/derived/blog/blog_base.html"/>

<div style="padding-bottom: 40px;" id="main">
    <div style="border-bottom: 1px solid #A5CC7A; margin-bottom: 20px;">
        <h3>修改我的资料</h3>
    </div>
    ${h.form(h.url_for(controller='blog', action='profile_update', sub_domain=c.userInfo.userName), method='post', id='updateForm', style="margin: 30px 0pt 30px 50px; width: 550px;")}
    <div style="border: 1px solid rgb(204, 204, 204); padding: 10px; background-color: white; width: 600px; color: rgb(0, 102, 153);">
        <table cellpadding="4">
            <tbody>
                <tr>
                    <td style="width: 100px;"> 注册名</td>
                    <td>${c.userInfo.userName}</td>
                </tr>
                <tr>
                    <td> 新密码</td>
                    <td>${h.password('password', class_='text')} 3-15个字符，不修改密码请保留为空</td>
                </tr>
                <tr>
                    <td> 新密码确认</td>
                    <td>${h.password('password_confirm', class_='text')}</td>
                </tr>
                <tr>
                    <td> 昵称</td>
                    <td>${h.text('realName', class_='text')}</td>
                </tr>
                <tr>
                    <td> 性别</td>
                    <td>${h.select("gender", "", [[0, ""], [1, u"男"], [2, u"女"]])}</td>
                </tr>
                <tr>
                    <td> 邮件地址</td>
                    <td>${h.text('email', class_='text')} 全站唯一</td>
                </tr>
                <tr>
                    <td> 来自</td>
                    <td>${h.select("city1", "", [["", ""], [u"北京", u"北京"], [u"上海", u"上海"], [u"广州", u"广州"], [u"深圳", u"深圳"], [u"重庆", u"重庆"], [u"武汉", u"武汉"], [u"成都", u"成都"], [u"长沙", u"长沙"]])}
                    如果没有可选城市，可直接输入　${h.text('city', class_='text')}</td>
                </tr>
                <tr>
                    <td> 职业</td>
                    <td>${h.select("vocation1", "", [["", ""], [u"程序员", u"程序员"], [u"设计师", u"设计师"], [u"教师", u"教师"], [u"医生", u"医生"], [u"官员", u"官员"], [u"作家", u"作家"], [u"运动员", u"运动员"], [u"歌手", u"歌手"]])}
                    如果没有可选职业，可直接输入　${h.text('vocation', class_='text')}</td>
                </tr>
                <tr>
                    <td> 行业</td>
                    <td>${h.select("industry1", "", [["", ""], [u"教育", u"教育"], [u"互联网", u"互联网"], [u"IT行业", u"IT行业"], [u"医务", u"医务"], [u"艺术", u"艺术"]])}
                    如果没有可选行业，可直接输入　${h.text('industry', class_='text')}</td>
                </tr>
                <tr>
                    <td style="height: 20px;" colspan="2"/>
                </tr>
                <tr>
                    <td colspan="2"><input id="btnSubmit" class="submit" type="button" value="提交修改" /></td>
                </tr>
            </tbody>
        </table>
    </div>
    ${h.end_form()}
</div>

<%def name="head()">
${parent.head()}
${h.javascript_link(h.url_for('/js/jquery.form.js'))}
${h.javascript_link(h.url_for('/js/jquery.validate.min.js'))}

<script type="text/javascript">

    $(document).ready(function() {
        $("#updateForm").validate({
            onsubmit: false,
            rules: {
                password: {
                    rangelength: [3, 15]
                },
                email: {
                    rangelength: [0, 50],
                    email: true,
                    remote: "${h.url_for(controller='account', action='validateEmailUpdate', sub_domain=c.userInfo.userName, userName=c.userInfo.userName)}"
                }
            },
            messages: {
                password: {
                    rangelength: jQuery.format("请输入{0}到{1}位密码")
                },
                email: {
                    rangelength: jQuery.format("Email长度必须在{0}到{1}位之间"),
                    email: "请输入合法的Email",
                    remote: jQuery.format("Email已经被使用！")
                }
            },
            // set this class to error-labels to indicate valid fields
            success: function(label) {
                // set &nbsp; as text for IE
                label.html("&nbsp;").addClass("checked");
            }
        });

        $('#city1').change(function(e) {
            $('#city').val($('#city1').val());
        });

        $('#vocation1').change(function(e) {
            $('#vocation').val($('#vocation1').val());
        });

        $('#industry1').change(function(e) {
            $('#industry').val($('#industry1').val());
        });

        $('#btnSubmit').click(function(e) {
            if ($("#updateForm").validate().form()) {
                $("#updateForm").submit();
            }
        });

    });

</script>
</%def>